<template>
  <div class="m-con">
    <MusicHeader class="header" />
    <router-view></router-view>

    <audio class="audio" ref="audio" v-if="musicSrc" @timeupdate="timeupdate" @canplay="canplay" :src="musicSrc.url" @ended="ended" autoplay controls></audio>

    <!-- 控制器 -->
    <div class="control" :style="'height:' + height + 'px'">
      <div class="box">
        <div class="progress">
          <div class="progress-bar">
            <div class="inner" :style="'width:' + (this.musicCurrent / this.musicTotal) * 100 + '%'"></div>
          </div>
        </div>

        <div class="cut">
          <div class="btn">
            <i class="el-icon-caret-left" @click="lastSong"></i>
          </div>

          <div class="btn">
            <i :class="musicState ? 'el-icon-video-pause' : 'el-icon-video-play'" @click="toggle"></i>
          </div>

          <div class="btn">
            <i class="el-icon-caret-right" @click="nextSong"></i>
          </div>

          <div class="time">{{ formatMinute(musicCurrent) }} / {{ formatMinute(musicTotal) }}</div>
        </div>

        <div class="lyric">{{ lyric.current }}</div>
      </div>

      <div class="mini">
        <i :class="height ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="handleHidden"></i>
      </div>
    </div>
  </div>
</template>

<script>
import MusicHeader from './MusicHeader.vue'
import MusicMain from './MusicMain.vue'
import MusicPlay from './MusicPlay.vue'
import MusicList from './MusicList.vue'

import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

import { mapState, mapMutations, mapActions } from 'vuex'

import { timeFormat } from '../../utils/tools'

export default {
  components: {
    MusicHeader,
    MusicMain,
    MusicPlay,
    MusicList,
  },

  data() {
    return {
      current: 0,
      height: 0,
      lyric: {
        current: '',
        arr: [],
      },
    }
  },

  computed: {
    ...mapState({
      urlList(state) {
        this.current = 0
        return state.music.urlList
      },
      musicTotal(state) {
        return state.music.musicTotal
      },
      musicCurrent(state) {
        return state.music.musicCurrent
      },
      musicState(state) {
        const current = state.music.musicState
        if (!this.urlList.length || !this.$refs['audio']) return current
        if (current) {
          this.$refs['audio'].play()
        } else {
          return this.$refs['audio'].pause()
        }
        return current
      },

      musicDeail(state) {
        return state.music.musicDeail
      },

      musicSrc(state) {
        return state.music.musicSrc
      },

      musicLyric(state) {
        return state.music.musicLyric
      },
    }),
  },

  methods: {
    ...mapMutations('music', ['setmusicState', 'setmusicTotal', 'setmusicCurrent']),

    ...mapActions('music', ['setMusicCurrentIdAction']),

    nextSong() {
      this.setMusicCurrentIdAction({ num: 1 })
    },
    lastSong() {
      this.setMusicCurrentIdAction({ num: -1 })
    },
    //时间格式化
    formatMinute(ms) {
      return dayjs.duration(ms * 1000).format('mm:ss')
    },

    //播放 暂停
    toggle() {
      console.log()
      if (this.$refs['audio'].paused) {
        this.$refs['audio'].play()
      } else {
        this.$refs['audio'].pause()
      }

      this.setmusicState(!this.musicState)
    },

    handleHidden() {
      this.height = this.height ? 0 : 60
    },

    //加载完成
    canplay() {
      this.setmusicTotal(this.$refs['audio'].duration)
      this.height = 60

      document.title = this.musicDeail.name

      let arr = this.musicLyric.split('\n')
      let arr2 = []

      arr.forEach(i => {
        if (i) {
          arr2.push({
            duration: timeFormat(i.slice(1, 10)),
            txt: i.substr(11),
          })
        }
      })

      this.lyric.arr = arr2
    },

    //播放更新
    timeupdate() {
      const currentTime = this.$refs['audio'].currentTime
      this.setmusicCurrent(currentTime)

      let i = this.lyric.arr.findIndex(i => {
        return i.duration > currentTime * 1000
      })

      if (this.lyric.arr[i - 1].txt) this.lyric.current = this.lyric.arr[i - 1].txt
    },

    //播放完毕
    ended() {
      this.caretRight()
    },
  },
}
</script>

<style lang="less" scoped>
.m-con {
  padding-top: 0px;

  padding-top: 80px;

  .header {
    position: fixed;
    top: 0;
    z-index: 2;
  }
  .control {
    height: 60px;
    background-color: #111;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    transition: all 300ms;

    .box {
      position: relative;

      .lyric {
        position: absolute;
        line-height: 60px;
        top: 0;
        left: 20%;
      }
    }

    .progress {
      height: 2px;
      .progress-bar {
        height: 2px;
        width: 100%;
        .inner {
          transition: all 100ms;
          position: relative;

          background-color: #f00;
          height: 2px;

          &::after {
            content: '';
            position: absolute;
            right: 0;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background-color: #f00;
            box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.5);
          }
        }
      }
    }

    .cut {
      display: flex;
      justify-content: center;
      font-size: 36px;
      line-height: 58px;

      .btn {
        margin: 0 15px;

        cursor: pointer;
      }

      .time {
        font-size: 14px;
        position: absolute;
        transform: translateX(200px);
      }
    }

    .mini {
      cursor: pointer;
      position: absolute;
      top: -20px;
      right: 10px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      line-height: 25px;
      text-align: center;
      background-color: #111;
    }
  }
}

.audio {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}
</style>
